<template>
  <div class="lookBox">
    <el-dialog @close="btnBannel" :title="question.subject + '题目预览'" :visible="questionLook">
      <!-- 上边内容 -->
      <div class="text">
        <ul>
          <li>【题型】：{{ question.questionType }}</li>
          <li>【编号】：{{ question.id }}</li>
          <li>【难度】：{{ question.difficulty }}</li>
          <li>【标签】：{{ question.tags }}</li>
          <li>【学科】：{{ question.subjectName }}</li>
          <li>【目录】：{{ question.directoryName }}</li>
          <li>【方向】：{{ question.direction }}</li>
        </ul>
      </div>
      <el-divider></el-divider>
      <!-- 题干 -->
      <div class="tags">
        <div>【题干】：</div>
        <div style="color: #0000ff" v-html="question.question"></div>
        <!-- 多选还是单选 -->
        <template v-if="question.questionType === '多选' && resList.length">
          <div>多选题 选项：（以下选中的选项为正确答案）</div>
          <el-checkbox-group :value="resList">
            <div class="checkbox" v-for=" item in question.options" :key="item.id">
              <el-checkbox :label="item.isRight">{{ item.title }}
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </template>
        <template v-else>
          <div>单选题 选项：（以下选中的选项为正确答案）</div>
          <div class="radio" v-for=" item in question.options" :key="item.id">
            <span>{{ item.code }}</span>
            <el-radio :value="1" :label="item.isRight">{{ item.title }}
            </el-radio>
          </div>
        </template>
      </div>
      <el-divider></el-divider>
      <!-- 参考答案 -->
      <div class="answer">
        <!--  @click="watchVideo" -->
        <span>【参考答案】: <el-button @click="watchVideo" type="danger">视频答案预览</el-button></span>
        <template v-if="showVideo && question.videoURL !== ''">
          <div class="video">
            <video width="400" height="300" controls="controls">
              <source :src="question.videoURL" type="video/mp4">
            </video>
          </div>
        </template>
      </div>
      <el-divider></el-divider>
      <!-- 答案解析 -->
      <div class="answerInfo">
        <span>【答案解析】：</span><span v-html="question.answer" class="answerInfo2"></span>
      </div>
      <el-divider></el-divider>
      <!-- 答案解析 -->
      <div class="answerInfo">
        <span>【答案解析】：</span><span v-html="question.remarks" class="answerInfo2"></span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="24">
            <el-button @click="btnBannel" type="primary">关闭</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants'
export default {
  props: {
    questionLook: {
      type: Boolean,
      default: false
    },
    question: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      resList: [],
      showVideo: false
    }
  },
  created () {
    this.resList = []
    // console.log(this.question)
    const newType = questionType.find(key => key.value === this.question.questionType - 0)
    this.question.questionType = newType.label
    const newdifficulty = difficulty.find(key => key.value === this.question.difficulty - 0)
    this.question.difficulty = newdifficulty.label
    // 处理一下结果数组
    this.resList = this.question.options.map(item => {
      if (item.isRight === 1) return item.isRight
    })
  },
  methods: {
    btnBannel () {
      this.$emit('update:questionLook', false)
    },
    btnsure () {
      this.$emit('update:questionLook', false)
    },
    watchVideo () {
      this.showVideo = true
    }
  }
}
</script>

<style scoped lang="scss">
.video {
  display: block;
  margin-top: 10px;
}

.radio {
  span {
    margin-right: 5px;
  }

  margin-bottom: 5px;
}

.checkbox {
  margin-bottom: 5px;
}

::v-deep {
  .el-dialog {
    width: 60vw;
  }

  .answerInfo2 {

    p,
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      display: inline;
    }
  }
}

.dialog-footer {
  text-align: right;
}

li {
  list-style: none;
}

.text {
  ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 0;

    li {
      width: 25%;
      margin-top: 20px;
    }
  }
}
</style>
